<template>
  <div>
      <button @click="add">添加</button>
      <div class="img-box">
          <img alt="" :src="v" v-for="(v, i) in picList" ref="imgs" :key="i">
      </div>
  </div>
</template>

<script src="https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js"></script>
<script>

const picList = [
        'https://images.pexels.com/photos/12017866/pexels-photo-12017866.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
        'https://images.pexels.com/photos/12315780/pexels-photo-12315780.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
        'https://images.pexels.com/photos/11577525/pexels-photo-11577525.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
        'https://images.pexels.com/photos/10406844/pexels-photo-10406844.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
        'https://images.pexels.com/photos/12142950/pexels-photo-12142950.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load',
        'https://images.pexels.com/photos/12089012/pexels-photo-12089012.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load'
    ]
function random(list){
        let max = list.length - 1
        return Math.floor(Math.random() * (max - 0 + 1) + 0)
}
const getRects = (doms) => {
        return doms.map(v=>{
            const rect = v.getBoundingClientRect()
            const {left, top} = rect
            return {left, top}
        })
}

let preload = (imgs) => {
  return new Promise((resolve, reject) => {
    if (!imgs.length) {
      resolve()
    }
    const length = imgs.length
    let count = 0

    const load = (src) => {
      let img = new Image()
      const checkIfFinished = () => {
        count++
        if (count === length) {
          resolve()
        }
      }

      img.onload = checkIfFinished
      img.onerror = checkIfFinished

      img.src = src
    }
    imgs.forEach(load)
  })
}
export default {
    data(){
        return{
            picList: [picList[random(picList)]],
            prev:[],
            cur:[],
        }
    },
    methods:{
        async add(){
            let newData = [picList[random(picList)]]
            // this.picList = [...this.picList, ...newData]
            await preload(newData)

            const prevImgs = this.$refs.imgs.slice()
            const prevPositions = getRects(prevImgs)

            this.picList = [...this.picList, ...newData]
            console.log('prev', prevPositions)
            this.$nextTick(()=>{
                let currrentPositions = getRects(prevImgs)
                console.log('current', currrentPositions)
                prevImgs.forEach((imgRef, idx) => {
                    const currrentPosition = currrentPositions[idx]
                    const prevPosition = prevPositions[idx]

                    const invert = {
                        left: prevPosition.left - currrentPosition.left,
                        top: prevPosition.top - currrentPosition.top
                    }

                    const keyframes = [
                        {
                            transform: `translate(${invert.left}px, ${invert.top}px)`,
                        },
                        {
                            transform:'translate(0)'
                        }
                    ]

                    const options = {
                        duration: 300,
                        easing: 'cubic-bezier(0, 0, 0.32, 1)'
                    }
                    const animation = imgRef.animate(keyframes, options)
                    // let animation = 
                    // console.dir(imgRef.animate)
                })
                
            })
        },
        getElements(){
            const prevImgs = this.$refs.imgs.slice()
            const prevPositions = getRects(prevImgs)
            return prevPositions
        }
    },
    mounted(){
        // this.prev = this.getElements()
    }
}
</script>

<style lang="less" scoped>
.img-box{
    display: flex;
    flex-wrap: wrap;
    img{
        width: 25%;
    }
}
</style>